<template>
	<div class="menu-left">
		<ul class="menu" >
			<li class="menu-item-group menu-home">
				<div class="menu-item-title"  @click='changeColor("home")' :class="{active: menutemp == 'home'}">
				<i class="iconfont icon-shouye"></i>
					首页
				</div>
			</li>
			<li class="menu-item-group" v-for='item in menuData'>
				<div class="menu-item-title">
				<i :class='item.icon' class="iconfont"></i>
					{{item.text}}
				</div>
				<ul>
					<li class="menu-item" v-for='child in item.children' 
					:class='{active:child.index == menutemp}'
					 @click='changeColor(child.index,child.router)'>
						{{child.text}}
					</li>
				</ul>
			</li>
		</ul>
	</div>
</template>
<script>
export default {
	data(){
		return {
			menuData: [{
				text: '患者管理',
				icon:'icon-yisheng',
				children: [{
					text: '术后随访患者',
					index: '1'
				},{
					text: '等待移植患者',
					router: '/waitPort',
					index: 'waitPort'
				}]
			},{
				text: '配型',
				icon:'icon-guanxixingpeizhizhuanhuan',
				children: [{
					text: '肾源配型',
					router: '/kidney',
					index: 'kidney'
				}]
			},{
				text: '管理',
				icon:'icon-guanlibaobiaoon',
				children: [{
					text: '随访设计设置',			
					index: '2'
				},{
					text: '用户管理',
					
					index: '3'
				},{
					text: '参数设置',
					index: '4'
				}]
			}],
			menutemp:''
		}
	},
	created(){
		this.menutemp = this.menuActive
	},
	computed:{
		menuActive(){
			var path = this.$route.path.replace('/', '')
			if(path.indexOf('waitPort') ==0 ){
				return 'waitPort'
			}
			if(path.indexOf('kidney') ==0 ){
				return 'kidney'
			}		
		}
	},
	methods:{
		changeColor(index,router){
			this.menutemp = index;
			if(router){
				this.$router.push(router);
			}
		}
	}
}	
</script>
<style lang='scss' rel='stylesheet/scss'>
@import '../assets/css/iconfont.css';
	.menu-item-group{
		font-size: 14px;
		color: #333333;
		.menu-item-title{
			overflow: hidden;
			padding-left: 20px;
			margin-bottom: 20px;
			height: 26px;
			line-height: 26px;
			font-weight: bold;
			.iconfont{
				display: inline-block;
				font-size: 20px;
				color: #06aea6;
				margin-right: 4px;
				vertical-align: middle;
			}
		}
		.menu-item{
			padding-left: 45px;
			height: 26px;
			line-height: 26px;
			margin-bottom: 20px;
			cursor: pointer;
		}
		.active{
			padding-left: 41px;
			border-left: 4px solid #06aea6;
			color: #06aea6;
		}
		.active{
			color: #06aea6;
			border-left: 4px solid #06aea6;
		}
	}
	.menu-home{
		.menu-item-title{
			cursor: pointer;
			margin-top: 24px;
		}
		.active{
			padding-left: 16px;
			border-left: 4px solid #06aea6;
			color: #06aea6;
		}
	}
	

</style>